<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>

    <el-timeline :reverse="reverse">

        <el-timeline-item v-for="(item, index) in itemList"
                          :key="index"
                          :icon="item.icon?icon:(item.isok ? 'el-icon-check' : '')"
                          :type="item.type"
                          :color="item.color?color:(item.isok ? '#409eff' : '')"
                          :size="item.size"
                          :timestamp="item.timestamp">
            {{item.content}}

            <div v-if="item.div"  v-html="renderData(item.div)">
            </div>

        </el-timeline-item>
    </el-timeline>
</template>

<script>


    export default {
        name: 'design-timeline',
        inject: ['getViewFormData'],
        props: {
            itemList: {
                type: Array,
                default: () => {
                    return []
                }
            },
            reverse: {
                type: Boolean,
                default: false
            }
        },
        // data() {
        //     return {
        //         formData:{"start":"2023年011月03日","end":"2023年12月13日"},
        //     };
        // },
        computed: {
            // start() {
            //     return 'Hello, this is dynamic content!';
            // },
            // end() {
            //     return ['Item 1', 'Item 2', 'Item 3'];
            // }
        },
        methods: {
            renderData(data) {

                if(!data){
                    return data;
                }
                var formData = this.getViewFormData();
                const result = data.replace(/{{(\w+)}}/g, (match, key) => formData?(formData[key] ||""):"");
                return  result;
                // let str = `<div>Hello {{end}}</div>`;
                // new Vue({
                //     el: "#test"+data.id,
                //     data: this.data,
                //     template: str
                // });
                // return"";

                // var code =  baseCompile("<div>hello world</div>",{ });
                // console.log(code);
                // const code1 = `with(this){return ${code}}`
                // return new Function(code1)

                // const parseObj = parse(data)
                // const { script,scriptSetup, template, styles,source } = parseObj.descriptor;
                // let curentScript = (script || scriptSetup)?.source
                // const fhtml = curentScript && curentScript.replace(/export\s+default/,"")
                // var runScript  = eval(`(${ fhtml })`)
                // if(!runScript){
                //     runScript = {}
                // }
                // runScript.template = template?template:source
                // const vnode = h("div", {name:"myh", id:"myh"},{...runScript});
                // //render(vnode,document.getElementById('vcode'))
                // return vnode.children.template;
              //   const prefixIdentifiers = true
              //   const ast = baseParse(data, this);
              //   const [nodeTransforms] = getBaseTransformPreset(
              //       prefixIdentifiers
              //   )
              //   transform(ast, {
              //       prefixIdentifiers,
              //       nodeTransforms: [
              //           ...nodeTransforms,
              //       ],
              //   })
              //   let exp =   generate(ast);
              // //  const code = `with(this){return ${exp}}`
              //   const code = `with(this){return `+exp.code +`}`
              //   return code

                //return new Function(exp.code)

               // return  h("div", {name:"myh", id:"myh"},ast.children);
                // const [nodeTransforms] = getBaseTransformPreset(
                //     prefixIdentifiers
                // )
                //
                // const tes = transform(ast, this)
                //
                // console.log(ast);
                // return  generate(ast).code;
                // // const render = Vue.compile(data)
                // const counter = ref(0)
                //
                // const increment = () => {
                //     counter.value ++
                // }


                // const render = h("div", {name:"myh", id:"myh"},'<h2>当前计数:  {{end}]</h2>');
                // return render.children;

                // var d = data.replace(new RegExp("{{", "gm"), "formData.");
                //return data;
            }
        }
    }
</script>


<style lang="scss" scoped>
    .content {
        background: #f7f7f7;
        padding: 5px 10px;
        > ul {
            padding: 0 !important;
            li {
                list-style: none;
                span {
                    color: #409eff;
                }
            }
        }
    }
</style>
